<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简易日历</title>
	<style>
		#tab {
			width: 408px;
			height: 680px;
			background: gainsboro;
			text-align: center;
			margin-left: 747px;
			margin-top: 20px;

		}

		#tab .active {
			background: white;
			color: red;
		}

		#tab ul {
			margin-left: -18px;
			margin-top: 20px;
			padding-top: 17px;

		}

		#tab li {
			width: 100px;
			height: 100px;
			background: black;
			border: 1px solid black;
			float: left;
			margin: 10px;

		}

		li {
			list-style: none;
			color: #EAEAEA;

		}

		.text {
			width: 345px;
			height: 120px;
			background: snow;
			border: 1px solid black;
			margin-left: 32px;
			margin-top: 10px;
			float: left;

		}
	</style>
	<script>
		window.onload=function ()
		{
			var oDiv = document.getElementById("tab");
			var aLi = oDiv.getElementsByTagName("li");
			var oTxt = oDiv.getElementsByTagName("div")[0];
			for (var i = 0;i < aLi.length;i++)
			{
				aLi[i].onmouseover = function ()
				{
					for (var i = 0;i < aLi.length;i++)
					{
						aLi[i].className = "";
					}
					this.className = "active";

				}
			}

		}





	</script>
</head>
<body>

<div id="tab" class="calendar">

	<ul>
		<li class="active" ><h2>1</h2>
			<p>JAP</p></li>
		<li><h2>2</h2>
			<p>FEB</p></li>
		<li><h2>3</h2>
			<p>MAR</p></li>
		<li><h2>4</h2>
			<p>APR</p></li>
		<li><h2>5</h2>
			<p>MAY</p></li>
		<li><h2>6</h2>
			<p>JUN</p></li>
		<li><h2>7</h2>
			<p>JUL</p></li>
		<li><h2>8</h2>
			<p>AUG</p></li>
		<li><h2>9</h2>
			<p>SEP</p></li>
		<li><h2>10</h2>
			<p>OCT</p></li>
		<li><h2>11</h2>
			<p>NOV</p></li>
		<li><h2>12</h2>
			<p>DEC</p></li>

	</ul>

	<div class="text">
		<!--<h2>1月活动</h2>-->
		<!--<p>快过年了,大家可以商量着去哪玩吧</p>-->

	</div>
</div>

</body>
</html>